CSSでロゴを立体的に回転して描画[解説]

CSSで画像を回転します。canvasを使いません。 CSSプロパティーtansformを使います。短いソースなので全文を表示します。


<!DOCTYPE html>
<html lang="ja">

<head>
	<meta charset="UTF-8" />
	<title>画像を拡大縮小して描画</title>
	<META http-equiv="Content-Style-Type" content="text/css">

	<script type="text/javascript">
		var rotateAngle = 0;

		function timerTask() {
		    rotateNameplate();
		}

		function rotateNameplate(){
			var e = document.getElementById("nameplate");
			var str = "perspective(400px) translateZ(-50px) rotateX("+ rotateAngle + "deg)";
			e.style.transform = str;
			rotateAngle += 5;
			if(rotateAngle >=360){
				rotateAngle = 0;
			}
		}

		function init() {
			window.setInterval(timerTask, 100);
		}
	</script>

</head>

<body onLoad="init()">
	<IMG id="nameplate" src="nameplate.png"  ><br>
	解説は<a href="nameplate_.html">こちら</a>。
</body>

</html>

rotateXが回転する角度(degree)です。